<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动画的定义和调用</title>

        <style>

            /* 可以使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀 */
            /* 
               @keyframes(定义动画) r(动画的名字) {
                    （起始状态）from{
                        transform：rotate(0);
                    }

                    （结束状态）to {
                        transform: rotate(360deg);
                    }
            } 
            */
            /* 定义动画之后，就可以使用animation属性调用动画
                    animation：r（动画的名字）1s(总时长) linear（缓动效果） 0s（延迟）;
                  - 第五个参数就是动画的在执行次数
                        animation: r 1s linear 0s 3(次数)；
                  - 如果想永远执行可以写infinite
                        animation：r 1s linear 0s infinite;
                  - alternate: 如果想让动画的第2、4、6......（偶数次）自动逆向执行，那么要加上alternate参数即可
                        animation: r 1s linear 0s  infinite alternate;
                  - forwards: 如果想让动画停止在最后结束状态，那么要加上forwards
                        animation: r 1s linear 0s forwards; 
            */

            .box1 {
                width: 200px;
                height: 200px;
                background-color: orange;
                animation: r 1s linear 0s infinite;
            }
            @keyframes r{
                from {
                    transform: rotate(0);
                }

                to {
                    transform: rotate(360deg);
                }
            }

            .box2 {
                width: 200px;
                height: 200px;
                background-color: blue;
                animation: movelr 2s linear 0s infinite alternate;
            }
            @keyframes movelr {
                from {
                    transform:translateX(0);
                }
                to {
                    transform:translateX(1000px);
                }
            }

            .box3 {
                width: 200px;
                height: 200px;
                background-color: green;
                animation: changeToCircle 1s linear 0s forwards;
            }
            @keyframes changeToCircle {
                from {
                    border-radius: 0;
                }
                to {
                    border-radius: 50%;
                }
            }

            /* 多关键帧动画
               @keyframes changeColor {
                   0% {
                       background-color：red;
                   }
                   20% {
                       background-color: yellow;
                   }
                   40% {
                       background-color: blue;
                   }
                   60% {
                       background-color: green;
                   }
                   80% {
                       background-color: purple;
                   }
                   100% {
                       background-color: orange;
                   }
               }
            */
            .box4 {
                width: 200px;
                height: 200px;
                background-color: red;
                animation: changeColor 3s linear 0s alternate infinite;
            }
            @keyframes changeColor {
                0% {
                    background-color: red;
                }
                20% {
                    background-color: yellow;
                }
                40% {
                    background-color: blue;
                }
                60% {
                    background-color: green;
                }
                80% {
                    background-color: purple;
                }
                100% {
                    background-color: orange;
                }
            }
        </style>
    </head>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</html>